$mainColor: #00599D;
@mixin ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@mixin vertical{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
body{
    background: #f5f5f5;
}
.label-link {
    display: block;
    height: .88rem;
    border-bottom: 1px solid #e5e5e5;
    line-height: .88rem;
    padding: 0 .3rem;
    position: relative;
    @include ellipsis();
    .label-text {
        font-size: .24rem;
        color: #000;
    }
    .assign-text {
        color: #8C8C8C;
        font-size: .24rem;   
    }
    &:after{
        display: block;
        content: "";
        background: url(../images/icon-arrow-right.png) no-repeat right  center;
        background-size: 100%; 
        width: .16rem;
        height: .30rem;
        position: absolute;
        right: .2rem;
        top: 50%;
        margin-top: -.16rem;
    }
}
.header {
    height: .8rem;
    background: $mainColor;
    position: relative;
    .title {
        font-size: .28rem;
        color: #fff;
        line-height: .80rem;
        text-align: center;
        font-weight: normal;
    }
    .ui-header-button {
        position: absolute;
        top: 0;
        height: .8rem;
        line-height: .8rem;
        font-size: .28rem;
        color: #fff;
        z-index: 5;
    }
    .right {
        right: .3rem;
    }
    .left {
        left: .3rem;
    }
    .button-light {
        background: #FFFFFF;
        border-radius: .08rem;
        font-size: .24rem;
        padding: 0 .2rem;
        height: .64rem;
        color:  $mainColor;
        line-height: .64rem;
        top: .1rem;
    }
}
.ui-button-clear {
    background: transparent;
    border: none;
}
.ui-mask {
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    transition: .5s all;
}
.ui-tips {
    background: #fff;
    width: 5.4rem;
    height: 3.2rem;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1.6rem -2.7rem;
    padding: 0 .3rem;
    z-index: 15;
    .ui-tips-title{
        padding: .33rem 0;
        font-size: .36rem;
        color: #212121;
    }
    .ui-tips-content {
        min-height: 1.44rem; 
        font-size: .28rem;
        line-height: .44rem;
        box-sizing: border-box;
        color: #A3A3A3;
    }
    .ui-tips-button {
        text-align: right;
        color: $mainColor;
    }
}
.form {
    padding: .5rem;
    background: #fff;
}
.form-tiny {
    padding: .25rem .25rem .25rem 0;
    margin-left: .25rem;
    background: #fff;
    position: relative;
    overflow: hidden;
    .new-title {
        font-size: .28rem;
        color: #1B1B20;
        .count-tip {
            font-size: .28rem;
            color: #909090;
        }
    }
    .type {
        font-size: .24rem;
        color: #8C8C8C;
        width: 1.76rem;
        float: left;
    }
    .part-button {
        position: absolute;
        right: .2rem;
        top: .1rem;
        .pane-control {
            color: #BDBDBD;
            font-size: .24rem;
            padding-right: .4rem;
            display: block;
            margin-top: .2rem;
            &.open {
                background: url(../images/icon-arrow-top.png) no-repeat right center;
                background-size: .28rem .14rem; 
            }
            &.close {
                background: url(../images/icon-arrow-bottom.png) no-repeat right center;
                background-size: .28rem .14rem;
            }
        }
    }
}
.form-label {
    background: #fff;
    
}
.form-item {
    margin-bottom: .3rem;
    label {
        font-size: .24rem;
        color: #909090;
        margin-bottom: .2rem;
        display: block;
    }
    &.valid {
        display: block;
        overflow: hidden;
    }
}
.form-input {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    font-size: .24rem;
    color: #909090;
    letter-spacing: 0rem;
    height: .64rem;
    line-height: .64rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .16rem .2rem;
    outline: none;
    &.valid-input {
        width: 40%;
        float: left;
    }
}
.validcode-box {
    width: 50%;
    line-height: .64rem;
    font-size: .24rem;
    color: #999;
    float: left;
    margin-left: .1rem;
    .validcode {
        width: 1.75rem;
        height: .64rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .2rem;
    }
}
.ui-button {
    display: inline-block;
    height: .64rem;
    text-align: center;
    line-height: .64rem;
    font-size: .24rem;
    padding: 0 .2rem;
    border-radius: 4px;
    border: none;
    outline: none;
    &.button-block {
        display: block;
    }
    &.button-blue {
        background: $mainColor;
        color: #fff;
    }
    &.button-blue-light {
        background: #71C0FD;
        color: #fff;
    }
}
.gray-bg {
    background: #F2F2F2;
}
.ui-mark{
    display: inline-block;
    vertical-align: middle;
    width: .32rem;
    height: .32rem;
    line-height: .32rem;
    font-size: .24rem;
    text-align: center;
    font-style: normal;
    &.b {
        background: #99C8E5;
        color: #fff;
    }
    &.g {
        background: #8CC84B;
        color: #fff;
    }
}
.tab-list {
    display: flex;
}
.tab-item {
    flex: 1;
    text-align: center;
    border-bottom: .07rem solid #F2F2F2;
    background: #F2F2F2;
    box-sizing: border-box;
    height: .8rem;
    line-height: .8rem;
    color: #8C8C8C;
    font-size: .24rem;
    &.active {
        border-bottom: .07rem solid $mainColor;
    }
}
.tab-content {
    display: none;
    &.active {
        display: block;
    }
}
#drag {
    height: .8rem;
    line-height: .8rem;
    color: #999;
    background: #f5f5f5;
    text-align: center;
    font-size: .24rem;
}
.clear-text {
    border: transparent;
    background: transparent;
    outline: none;
    display: block;
    float: left;
    width: 3.8rem;
    font-size: .24rem;
    color: #999;
}
.item-list {
    border: 1px solid #e2e2e2;
    height: 4.8rem;
    overflow-y: auto; 
    li{
        height: .48rem;
        padding: 0 .2rem;
        line-height: .48rem;
        font-size: .24rem;
        color: #909090;
        &.on {
            background: #CBE8FF;
        }
    }
}
.right-button {
    text-align: right;
}


.select-bar {
    display: -webkit-flex;
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    .select-box {
        display: flex;
        flex: 1;
        height: .88rem;
        line-height: .88rem;
        position: relative;
        border-right: 1px solid #e2e2e2;
        &.border-none {
            border: none;
            @include vertical();
        }
        &:last-child{
            border: none;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            text-align: center;
            font-size: .24rem;
            color: #909090;
            i{
                background: url(../images/icon-arrow-select.png) no-repeat;
                width: .12rem;
                height: .17rem;
                background-size:  100%;
                vertical-align: middle;
                display: inline-block;
                margin-left: .1rem;
            }
           
        }
        select {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            opacity: 0;
        }
        input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            opacity: 0;
        }
    }
}
.form-result {
    padding-left: .25rem;
    background: #fff;
    margin-top: .2rem;
    .form-title {
        height: .88rem;
        line-height: .88rem;
        font-size: .28rem;
        color: #1B1B20;
        border-bottom: 1px solid #e2e2e2;
    }
    .form-data {
        overflow: hidden;
        border-bottom: 1px solid #e2e2e2;
        height: .88rem;
        line-height: .88rem;
        font-size: .24rem;
        padding-right: .2rem;
        .label {
            font-size: .24rem;
            color: #909090;
            float: left;
        }
        .result {
            font-size: .24rem;
            color: #00599D;
            float: right;
        }

    }
    .label-link {
        padding-left: 0;
    }

}